<template>
	<div class="order_data table-theme">
		<head-title title="数据-利润数据"></head-title>
		<div style="display: flex;margin-bottom: 50px;">
			<div v-for="(item, index) in cardList" :key="index" style="margin-right: 20px;">
				<cardPanel :img="item.img" :title="item.title" :num="item.num" :color="item.color"></cardPanel>
			</div>
		</div>
		<div>
			<el-row :gutter="20">
				<el-col :span="6" v-for="(item, index) in performanceData" :key="index">
					<dataPanel
						:title="item.newData.title"
						:name="item.newData.name"
						:lastname="item.oldData.name"
						:price="item.newData.price"
						:profit="item.newData.profit"
						:lastPrice="item.oldData.price"
						:lastProfit="item.oldData.profit"
					></dataPanel>
				</el-col>
			</el-row>
		</div>

		<div class="profit-list-data table-theme">
			<div class="profit-list-data-view">
				<div class="profit-top-menu">
					<div class="profit-menu-left">
						<div class="date-select-view">
							<el-select v-model="OrderListSelectVal.year" placeholder="年份" @change="OrderListSelect">
								<el-option v-for="item in orderOptions.yearOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</div>

						<div class="date-select-view">
							<el-select v-model="OrderListSelectVal.month" placeholder="月份" @change="OrderListSelect">
								<el-option v-for="item in orderOptions.monthOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</div>
					</div>

					<div class="profit-menu-right">
						<refresh-button @refresh="refreshPage"></refresh-button>
						<search-view :option="searchOption" @value="goSearch" @clear="refreshPage" ></search-view>
					</div>
				</div>
				<p style="text-align: right;line-height: 30px;">总数据数：{{total}}</p>
				<el-table :data="moneyListData" stripe>
					<el-table-column label="订单编号" align="center" prop="order_sn" width="140"></el-table-column>
					<el-table-column label="店铺id" align="center" prop="store_id"></el-table-column>
					<el-table-column label="店铺名" align="center" prop="store_name"></el-table-column>
					<el-table-column label="用户id" align="center" prop="user_id"></el-table-column>
					<el-table-column label="用户名" align="center" prop="user.nickname"></el-table-column>
					<el-table-column label="头像" align="center" width="80">
						<template slot-scope="scope">
							<el-image :src="scope.row.user == null ? '' : scope.row.user.heard_img" style="width: 50px; height: 50px; vertical-align: top;"></el-image>
						</template>
					</el-table-column>
					<el-table-column label="跟单员" align="center" prop="follow_user"></el-table-column>
					<el-table-column label="招商员" align="center" prop="introduce_user"></el-table-column>
					<el-table-column label="厂家利润" align="center" prop="moneny_f" key="moneny_f" v-if="admin_type==1"></el-table-column>
					<el-table-column label="平台利润" align="center" prop="moneny_s" key="moneny_s" v-if="admin_type==1"></el-table-column>
					<el-table-column label="商家利润" align="center" prop="moneny_b"></el-table-column>
					<el-table-column label="备注" align="center" prop="brief"></el-table-column>
					<el-table-column label="总价格" align="center" prop="price"></el-table-column>
					<el-table-column label="订单时间" align="center" prop="time"></el-table-column>
					<el-table-column label="操作" align="center" width="180">
						<template slot-scope="scope">
							<el-button type="primary" size="mini" @click="goOrderDetails(scope.row.order_id)">详情</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="pages">
					<el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="getStoreData" :current-page="page"></el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import cardPanel from '@/components/card-panel';
import dataPanel from '@/components/data-panel';
export default {
	components: {
		cardPanel,
		dataPanel
	},
	data() {
		return {
			filiale_id: localStorage.getItem('filiale_id'),
			orderOptions: {
				yearOptions: [
					{
						value: '2018',
						label: '2018'
					},
					{
						value: '2019',
						label: '2019'
					},
					{
						value: '2020',
						label: '2020'
					}
				],
				monthOptions: [
					{
						value: '01',
						label: '01'
					},
					{
						value: '02',
						label: '02'
					},
					{
						value: '03',
						label: '03'
					},
					{
						value: '04',
						label: '04'
					},
					{
						value: '05',
						label: '05'
					},
					{
						value: '06',
						label: '06'
					},
					{
						value: '07',
						label: '07'
					},
					{
						value: '08',
						label: '08'
					},
					{
						value: '09',
						label: '09'
					},
					{
						value: '10',
						label: '10'
					},
					{
						value: '11',
						label: '11'
					},
					{
						value: '12',
						label: '12'
					}
				]
			},
			performanceData: [],
			moneyListData: [],
			OrderListSelectVal: {
				year: '',
				month: ''
			},
			page: 0,
			total: 0,totalData: 0, 
			cardList: [
				{
					title: '总的业绩金额（元）',
					img: require('../../assets/image/ico_achievement.png'),
					num: '0',
					color: '#61A1F9'
				},
				{
					title: '总的利润金额（元）',
					img: require('../../assets/image/ico_profit.png'),
					num: '0',
					color: '#FE7A85'
				}
			],
			admin_id: localStorage.getItem('admin_id'),
			admin_type: localStorage.getItem('admin_type'),
			searchOption: [
				{
					value: 0,
					label: "店铺ID",
				},
				{
					value: 1,
					label: "订单编号",
				},
				{
					value: 2,
					label: "用户ID",
				},
				{
					value: 3,
					label: "店铺名"
				}
			],
			classSelect: 0,
			selectContent: "",
		};
	},
	methods: {
		// 获取对比数据
		getComparison() {
			let data = {
				day: 5
			};
			if (localStorage.getItem('admin_id') == 2) {
				data.store_id = localStorage.getItem('store_id');
			}

			this.$http(this.$ApiList.MoneyContrastData, data).then(res => {
				if (res.code == 200) {
					this.cardList[0].num = res.datas.all.price.toString();
					this.cardList[1].num = res.datas.all.profit.toString();

					res.datas.today.name = '今日';
					res.datas.week.name = '今周';
					res.datas.month.name = '今月';
					res.datas.year.name = '今年';

					res.datas.today.title = '日';
					res.datas.week.title = '周';
					res.datas.month.title = '月';
					res.datas.year.title = '年';

					res.datas.yesterday.name = '昨日';
					res.datas.last_week.name = '上周';
					res.datas.last_month.name = '上月';
					res.datas.last_year.name = '去年';

					this.performanceData.push({
						newData: res.datas.today,
						oldData: res.datas.yesterday
					});
					this.performanceData.push({
						newData: res.datas.week,
						oldData: res.datas.last_week
					});
					this.performanceData.push({
						newData: res.datas.month,
						oldData: res.datas.last_month
					});
					this.performanceData.push({
						newData: res.datas.year,
						oldData: res.datas.last_year
					});
				}
			});
		},
		// 业绩列表数据
		getStoreData(e) {
			let data = {
				page: e - 1 ? e - 1 : 0,
				limit: 10,
			};
			
			if(this.admin_type != 1){
				data.store_id = localStorage.getItem('store_id')
			}

			if (this.OrderListSelectVal.year == '') {
				data.day = 1;
			} else if (this.OrderListSelectVal.month == '') {
				data.day = 2;
				data.time = this.OrderListSelectVal.year;
			} else {
				data.day = 3;
				data.time = this.OrderListSelectVal.year + '-' + this.OrderListSelectVal.month;
			}

			if (this.selectContent != '' && this.classSelect == 0) {
				data.store_id = this.selectContent;
			} else if (this.selectContent != '' && this.classSelect == 1) {
				data.order_id = this.selectContent;
			} else if (this.selectContent != '' && this.classSelect == 2) {
				data.user_id = this.selectContent;
			} else if (this.selectContent != '' && this.classSelect == 3) {
				data.store_name = this.selectContent;
			}
			
			if (this.filiale_id != 1) {
				delete data.store_id
			}

			this.$http(this.$ApiList.MoneyListData, data).then(res => {
				if (res.datas.list.length > 0) {
					this.moneyListData = res.datas.list;
					this.total = res.datas.count;
				}
			});
		},
		// 筛选列表数据
		OrderListSelect() {
			this.getStoreData();
		},
		// 刷新列表数据
		refreshPage() {
			this.page = 1;
			this.OrderListSelectVal.year = '';
			this.OrderListSelectVal.month = '';
			this.selectContent = '';
			this.classSelect = 0;

			let data = {
				page: 0,
				limit: 10,
				day: 1
			};
			
			if(this.admin_type != 1){
				data.store_id = localStorage.getItem('store_id')
			}
			
			if (this.filiale_id != 1) {
				delete data.store_id
			}

			this.$http(this.$ApiList.MoneyListData, data).then(res => {
				this.moneyListData = res.datas.list;
				this.total = res.datas.count;
			});
		},
		// 搜索列表数据
		goSearch(classSelect, selectContent) {
			this.classSelect = classSelect;
			this.selectContent = selectContent;
			this.getStoreData();
		},
		getYear() {
			this.orderOptions.yearOptions = [];
			let yearNum = new Date().getFullYear() + 1;
			for (let i = 2018; i < yearNum; i++) {
				let year = {
					value: i,
					label: i
				};
				this.orderOptions.yearOptions.push(year);
			}
		},
		goOrderDetails(id) {
			this.$router.push({ path: '/order_details', query: { id: id } });
		}
	},

	created() {
		this.getYear();
		this.getStoreData();
		this.getComparison();
	}
};
</script>
<style>
.profit-column,
.profit-statistics {
	background-color: #ffffff;
	box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.14);
	border-radius: 4px;
}
.profit-column .chart-view-title {
	margin: 0 28px;
	line-height: 44px;
	font-size: 16px;
	font-weight: bold;
	border-bottom: 1px solid #dedede;
	color: #333;
}
.profit-column .chart-menu {
	margin-top: 30px;
	padding: 0 28px 0 40px;
	display: flex;
}
.profit-column .chart-menu .chart-menu-left {
	display: flex;
	flex: 1;
}
.profit-column .chart-menu .tips {
	margin-right: 12px;
	line-height: 30px;
}
.date-select {
	margin-right: 10px;
	width: 80px;
}
.profit-column .chart-menu .chart-menu-left .el-input__inner,
.chart-menu-left .el-select__caret,
.el-select-dropdown__item {
	height: 30px;
	line-height: 30px;
}
.profit-statistics {
	margin-top: 20px;
}
.profit-statistics .data-panel {
	padding: 10px 66px 10px 66px;
	text-align: center;
}
.profit-statistics .data-panel .data-panel-view {
	padding: 5px 0 5px 0;
	border-right: 1px solid #dedede;
	border-bottom: 1px solid #dedede;
}
.profit-statistics .data-panel-view-last {
	border-bottom: none !important;
}
.data-panel .data-panel-view:nth-child(4),
.data-panel .data-panel-view:nth-child(8),
.data-panel .data-panel-view:nth-child(12),
.data-panel .data-panel-view:nth-child(16) {
	border-right: none !important;
}

.profit-statistics .data-panel .data-panel-item p:first-child {
	margin-top: 10px;
	margin-bottom: 10px;
	line-height: 15px;
	color: #666666;
}
.profit-statistics .data-panel .data-panel-item p:last-child {
	font-size: 24px;
	font-weight: bold;
	color: #333333;
}
/* 订单数据列表 */
.profit-list-data {
	margin-top: 20px;
}
.profit-list-data-view {
	padding: 20px 20px;
	background-color: #fff;
	border-radius: 4px;
	box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.14);
}
.order_data .profit-top-menu {
	display: flex;
}
.order_data .refresh-btn {
	margin-left: 10px;
}
.profit-menu-left {
	flex: 1;
	display: flex;
}
.profit-menu-right {
	flex: 2;
	display: flex;
	flex-direction: row-reverse;
}

.date-select-view {
	margin-right: 10px;
	width: 120px;
}

.profit-top-menu .input-with-select .el-input-group__prepend {
	width: 110px;
	background-color: #fff;
}
.profit-top-menu .input-with-select .el-input__inner:nth-child(2) {
	width: 150px;
	padding-right: 15px;
}
</style>
